<template>
  <div id="app">
    <transition :name="transitionName"> 
　　　　<router-view class="Router"></router-view>
　　 </transition>
		<div class="loader"v-show="isLoading">
			<div class="content" >
				<span class="mui-spinner"></span>
				<span>加载中...</span>
			</div>
		</div>
  </div>
</template>

<script>
	import store from './vuex/index'
	import {mapState} from 'vuex'
	export default {
		store,
		data() {
			return {
				transitionName: 'slide-right'  // 默认动态路由变化为slide-right
			}
		},
	  mounted() {
 
			document.getElementById('app').style.height = window.innerHeight + "px"
//			var data = window.android.userMsg()   //安卓的方法
//			sessionStorage.state = 0
//			var token = JSON.parse(data)
//			sessionStorage.token = token.token
//			sessionStorage.userId = token.userId
//			sessionStorage.state = token.state
	  },
	  computed: {
      ...mapState([
        'isLoading'
      ])
    },
	  watch: {
	　　　'$route' (to, from) {
	　　　　	let isBack = this.$router.isBack  //  监听路由变化时的状态为前进还是后退
	　　　　　　if(isBack) {
	　　　　　　　　this.transitionName = 'slide-right'
	　　　　　　} else {
	　　　　　　       this.transitionName = 'slide-left'
	　　　　　	}
		　　		this.$router.isBack = false
		　　}
		}
	}
</script>

<style lang="less">
	@import url("../static/css/reset.css");
	@import url("../static/css/index.less");
	#app {
		background: #eee;
		position: fixed;
		width: 100%;
	}
	
	.Router {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow-y: scroll;
     transition: all 0.8s ease;
     /*top: 40px;*/
	}
	
	/*隐藏滚动条*/
	.Router::-webkit-scrollbar {display:none}
	
	.slide-left-enter,
	.slide-right-leave-active {
	     opacity: 0;
	    -webkit-transform: translate(100%, 0);
	    transform: translate(100%, 0);
	}
	
	.slide-left-leave-active,
	.slide-right-enter {
	     opacity: 0;
	    -webkit-transform: translate(-100%, 0);
	    transform: translate(-100% 0);
	}
	
	.loader {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		
		.content {
			border-radius: 10px;
			position: absolute;
			top: 35%;
			left: 35%;
			width: 30%;
			height: 100px;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			border: 1px solid #eee;
			
			span:first-child {
				width: 30px;
				height: 30px;
			}
			
			span:last-child {
				font-size: 14px;
				margin-top: 10px;
			}
		}
	}
</style>
